<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>

</head>
<body>
    <div id="ab3fc8240c6f4c1982bfd96a00c4a6bf" class="chart-container" style="width:1200px; height:800px;"></div>
    <script>
        var chart_ab3fc8240c6f4c1982bfd96a00c4a6bf = echarts.init(
            document.getElementById('ab3fc8240c6f4c1982bfd96a00c4a6bf'), 'white', {renderer: 'canvas'});
        var option_ab3fc8240c6f4c1982bfd96a00c4a6bf = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "color": [
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3",
        "#f05b72",
        "#ef5b9c",
        "#f47920",
        "#905a3d",
        "#fab27b",
        "#2a5caa",
        "#444693",
        "#726930",
        "#b2d235",
        "#6d8346",
        "#ac6767",
        "#1d953f",
        "#6950a1",
        "#918597"
    ],
    "series": [
        {
            "type": "pie",
            "name": "\u5f55\u53d6\u5206\u6570\u6982\u89c8",
            "clockwise": true,
            "data": [
                {
                    "name": "300-310",
                    "value": 4
                },
                {
                    "name": "310-320",
                    "value": 3
                },
                {
                    "name": "320-330",
                    "value": 7
                },
                {
                    "name": "330-340",
                    "value": 7
                },
                {
                    "name": "340-350",
                    "value": 6
                },
                {
                    "name": "350-360",
                    "value": 1
                },
                {
                    "name": "360-370",
                    "value": 4
                },
                {
                    "name": "370-380",
                    "value": 3
                },
                {
                    "name": "380-390",
                    "value": 0
                },
                {
                    "name": "390-400",
                    "value": 1
                },
                {
                    "name": "400-410",
                    "value": 0
                }
            ],
            "radius": "40%",
            "center": [
                "35%",
                "38%"
            ],
            "label": {
                "show": true,
                "position": "top",
                "margin": 8,
                "formatter": "{b|{b}: }{c}  {per|{d}%}  ",
                "rich": {
                    "b": {
                        "fontSize": 16,
                        "lineHeight": 33
                    },
                    "per": {
                        "color": "#eee",
                        "backgroundColor": "#334455",
                        "padding": [
                            2,
                            4
                        ],
                        "borderRadius": 2
                    }
                }
            }
        }
    ],
    "legend": [
        {
            "data": [
                "300-310",
                "310-320",
                "320-330",
                "330-340",
                "340-350",
                "350-360",
                "360-370",
                "370-380",
                "380-390",
                "390-400",
                "400-410"
            ],
            "selected": {},
            "show": true,
            "left": "0%",
            "top": "65%",
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0
    },
    "title": [
        {
            "text": "\u5f55\u53d6",
            "subtext": "Made by rengar",
            "padding": 5,
            "itemGap": 10
        }
    ]
};
        chart_ab3fc8240c6f4c1982bfd96a00c4a6bf.setOption(option_ab3fc8240c6f4c1982bfd96a00c4a6bf);
    </script>
</body>
</html>
